<template>
  <article class="article">
    <header class="article-header">
      <el-popover
          placement="top-start"
          :title="article.nickName"
          :width="200"
          trigger="hover"
      >
        <img style="width: 2rem;" src="/img/default.jpg" alt="">
        <!--todo 展示帖子作者的相关信息-->
        <template #reference>
          <span>{{ article.nickName }}</span>
        </template>
      </el-popover>

      <span> {{ ' 发布于: ' + article.postTime }}</span>
      <div class="title">
        <span id="tuijian" v-if="article.topType!==0">推荐</span>
        <h3 @click="toArticleInfo" v-html="article.title"></h3>
      </div>

    </header>
    <div class="article-content">
      <div @click="toArticleInfo" class="img">
        <img :src="article.cover || '/img/article-default.jpg'">
      </div>

      <div @click="toArticleInfo" class="article-text">
        <span v-html="article.summary"></span>
      </div>
    </div>
    <footer class="article-footer">
      <div class="footer-left">
        <button @click="like(article.articleId)" class="like-btn" :class="{liked: article.isLiked}">
          <span>{{ (article.isLiked === 0 ? '赞同 ' : '已赞同 ') + article.goodCount }}</span>
          <svg class="icon">
            <use xlink:href="#icon-dianzan"></use>
          </svg>
        </button>

        <div class="icons">
            <span><svg class="icon">
                <use xlink:href="#icon-pinglun"></use>
            </svg>{{ article.commentCount }}条评论</span>

          <span><svg class="icon">
              <use xlink:href="#icon-shoucang"></use>
            </svg>收藏</span>

          <span><svg class="icon">
              <use xlink:href="#icon-fenxiang"></use>
            </svg>分享</span>
        </div>
      </div>

      <div class="footer-right">
        <div class="icons">
          <span><svg class="icon">
              <use xlink:href="#icon-liulan"></use>
            </svg>{{ article.readCount }}浏览</span>
        </div>

      </div>


    </footer>
  </article>
</template>

<script setup>
import {useRouter} from "vue-router";
import {useArticleStore} from "@/store/articleStore.js";
import {toRef, toRefs} from 'vue'

const router = useRouter();
const articleStore = useArticleStore();
const props = defineProps({
  article: Object
})
let {article} = toRefs(props);
/**
 * 查看帖子详情
 * @returns {Promise<void>}
 */
const toArticleInfo = async () => {
  //路由跳转，打开新窗口
  const url = router.resolve(`/article/${article.value.articleId}`);
  window.open(url.href)
}


/**
 * 帖子点赞
 * @param articleId
 */
const like = async (articleId) => {
  await articleStore.likeArticle(articleId)
  if (article.value.isLiked) {
    article.value.isLiked = 0
    article.value.goodCount -= 1
  } else {
    article.value.isLiked = 1
    article.value.goodCount += 1
  }
}
</script>

<style lang="scss" scoped>
@import "@/styles/var";

.article {
  width: 100%;
  margin: 30px 0;
}

.article-header {
  span {
    font-size: 0.8rem;
    color: $color-black-text;
    opacity: 0.8;
  }

  .title {
    display: flex;
    align-items: center;

    #tuijian {
      background-color: #f11414;
      color: $color-white;
      font-size: 1rem;
      border-radius: 3px;
      font-weight: normal;
    }

    h3 {
      //display: inline-block;
      font-size: 1.2rem;
      font-weight: bold;
      margin: 5px 0;
      //多余文字省略
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    h3:hover {
      cursor: pointer;
      color: rgb(23, 83, 153);
    }
  }


}

.article-content {
  width: 100%;
  height: 125px;
  margin: 10px 0;
  display: flex;
  cursor: pointer;

  .img {
    width: 240px;
    min-width: 240px;
    height: 125px;
    margin-right: 20px;

    img {
      border-radius: 5px;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }

  .article-text {
    span {
      line-height: 30px;
      word-spacing: normal;
      overflow: hidden; //超出隐藏
      text-overflow: ellipsis; //超出使用省略号
    }

    span::after {
      content: '阅读全文...';
      color: $color-theme;
    }

    span:hover {
      color: $color-black-text;
      opacity: 0.7;
    }

  }
}

.article-footer {
  width: 100%;
  display: flex;
  justify-content: space-between;

  .footer-left,
  .footer-right {
    display: flex;

    .like-btn {
      outline: none;
      height: 30px;
      border: none;
      background-color: rgb(218, 233, 252);
      opacity: 0.8;
      color: rgb(5, 109, 232);
      border-radius: 2px;
      margin-right: 30px;
      cursor: pointer;

      svg {
        margin-left: 5px;
      }

    }

    .like-btn.liked {
      background-color: #056de8;
      color: #dddddd;
    }

    .like-btn:hover {
      opacity: 1;
    }

    .icons {
      height: 30px;
      line-height: 30px;
      color: rgb(117, 134, 154);

      span {
        margin-right: 30px;
        margin-left: 5px;
        cursor: pointer;
        opacity: 0.8;
      }

      span:hover {
        opacity: 1;
      }
    }
  }

}
</style>